import styled from "@emotion/styled"
import bgUrl from "@assets/image/login_bg.webp"

export const LoginContainer = styled.div(() => ({
  position: "fixed",
  top: "0",
  left: "0",
  right: "0",
  bottom: "0",
  background: `url(${bgUrl}) no-repeat`,
  backgroundSize: "cover",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",

  ".loginForm": {
    padding: "3rem 2rem",
    width: "400px",
    background: "#fff",
    borderRadius: "4px"
  },

  ".title": {
    textAlign: "center",
    fontSize: "1.25rem",
    fontWeight: 700
  },

  ".code": {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    gap: "2rem",

    ".ant-image": {
      flexShrink: "0"
    }
  },

  ".submit": {
    width: "100%"
  }
}))